<template>
    <view class="container bg-fff">
        <view class="con flex-column-center">
            <image :src="$setting.avatarUrl()"></image>
            <u-form
                ref="uForm"
                labelPosition="left"
                :model="formData"
                :rules="rules"
                labelWidth="190"
            >
                <u-form-item
                    label-width="170rpx"
                    label="手机号码"
                    prop="mobile"
                >
                    <u-input
                        v-model="formData.mobile"
                        placeholder="请输入手机号码"
                    />
                </u-form-item>
                <u-form-item
                    label-width="170rpx"
                    label="密码"
                    prop="password"
                >
                    <u-input
                        v-model="formData.password"
						type="password"
                        placeholder="请输入密码"
                    />
                </u-form-item>
            </u-form>
            <button
                class="login u-reset-button flex-center"
                hover-class="login-hover"
                @click="login"
            >
                登录
            </button>
        </view>
    </view>
</template>

<script>
export default {
    name: 'h5_login',
    data() {
        return {
            sessionKey: '',
            formData: {
                mobile: 15207712113,
                password: 123456,
            },
            // 在rules里生成u-form 的手机和密码验证规则
            rules: {
                mobile: [
                    {
                        required: true,
                        message: '请填写手机号',
                        trigger: ['blur', 'change'],
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (value) {
                                return this.$u.test.mobile(value);
                            }
                        },
                        message: '手机号码不正确',
                        trigger: ['change', 'blur'],
                    },
                ],
                password: {
                    required: true,
                    message: '请填写密码',
                    trigger: ['blur', 'change'],
                },
            },
        };
    },
    onReady() {
        //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
        this.$refs.uForm.setRules(this.rules);
    },
    onLoad() {},
    methods: {
        async login() {
			
			if(!this.formData.mobile){
				uni.showToast({
					title: "请填写手机号",
					icon: "none"
				})
				return false
			}
			if(!this.formData.password){
				uni.showToast({
					title: "请输入密码",
					icon: "none"
				})
				return false
			}
            try {
                const res = await uni.$u.api.mobileLogin(this.formData);
                uni.setStorageSync('token', res.token);
                // uni.$once('login', ()=>{
                //     // 
                // });
                uni.switchTab({
                    url: '/pages/index/index',
                });
            } catch (error) {
                console.log(error);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    .con {
        padding-top: 100rpx;

        image {
            width: 180rpx;
            height: 180rpx;
        }

        .title {
            font-size: 34rpx;
            font-weight: bold;
            margin-top: 40rpx;
        }

        .tips {
            margin-top: 20rpx;
            font-size: 28rpx;
            color: #666666;
        }

        .login {
            margin-top: 50rpx;
            width: 600rpx;
            height: 90rpx;
            background-color: $uni-color-theme;
            border-radius: 90rpx;
            color: #ffffff;
            font-size: 30rpx;
            border: 1px solid $uni-color-theme;
        }

        .login-hover {
            background-color: #ffffff;
            color: #2b85e4;
            border-color: #2b85e4;
        }
    }
}
.u-form {
    width: 60%;
}
</style>
